<template>
  <div>
    <!-- banner图 -->
    <div class="header-img"></div>
    <!-- 文本内容 -->
    <div class="middle">
      <div class="middle-conten">
        <div class="text1">
          <p>{{ list.content }}</p>
        </div>
        <div class="text2">
          <h2>联系我们</h2>
          <h5>公司邮箱：{{ list.email }}</h5>
          <h5>联系方式：{{ list.phone }}</h5>
          <h5>客服微信：</h5>
          <img src="../assets/image/erweima.jpg" alt="" style="width: 100px; height: 100px;">
          <h1>联系我们</h1>
        </div>
      </div>
    </div>
    <!-- 页面底部 -->
    <div>
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import { Contact } from "@/api/api";
export default {
  data(){
    return{
      list:{}
    }
  },
  mounted(){
    Contact().then((res)=>{
      this.list=res.data
    })
  }
}
</script>

<style lang="less" scoped>
.header-img {
  height: 400px;
  background-image: url('../assets/image/1.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.middle {
  display: flex;
  justify-content: center;
  .middle-conten {
    width: 900px;
    height: 300px;
    display: flex;
    background-color: #195ff8;
    position: relative;
    top: -40px;
    border-radius: 10px;
    .text1 {
      width: 500px;
      height: 300px;
      background-color: white;
      position: relative;
      z-index: 100;
      top: -100px;
      border-radius: 10px;

      p {
        font-size: 18px;
        color: #1e278b;
        margin: 20px;
        text-indent: 2em;
      }
    }

    .text2 {
      color: white;
      margin-left: 50px;
      width: 400px;
      position: relative;
      h1{
        position: relative;
        top: -500px;
        right: 300px;
        color: #35445E;
        font-size: 58px;
      }
      h2{
        font-size: 20px;
        font-weight: bold;
        margin-top: 30px;
        margin-bottom: 20px;
      }
      h5 {
        margin-top: 10px;
        font-size: 18px;
      }

      img {
        margin-left: 100px;
      }
    }
  }
}
</style>